<template>
	<s-layout title="积分中心" navbar="normal" :bgStyle="template.style?.background" color='#333333'>
		<view class="tips-box ss-flex justify-between align-center ss-p-x-32" @click="go">
			<view>点击去往积分商城，兑换丰厚奖品</view>
			<uni-icons type="right" size="18" color="#fff"></uni-icons>
		</view>
		<view class="info ss-flex flex-column justify-center align-center ss-p-x-30">
			<view class="w-100 top ss-flex justify-between align-center">
				<view class="exchange ss-flex justify-center align-center" style="opacity: 0;">
					<view class="ss-m-r-5">兑换犇犇币</view>
					<image class="query" mode="aspectFit"></image>
				</view>
				<view class="num">{{userInfo.score||0}}</view>
				<view class="exchange ss-flex justify-center align-center" style="opacity: 0;">
					<view class="ss-m-r-5">兑换犇犇币</view>
					<image class="query"
						src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/point-query.png"
						mode="aspectFit"></image>
				</view>
			</view>
			<view class="w-100 ss-flex justify-between align-center ss-m-t-20">
				<view class="record" style="opacity: 0;">积分记录</view>
				<view class="ss-flex justify-center align-center">
					<image class="point"
						src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/point-my.png"
						mode="aspectFit"></image>
					<view class="record ss-m-x-10">我的积分</view>
					<image class="query"
						src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/point-query.png"
						mode="aspectFit"></image>
				</view>
				<view class="record" @click="sheep.$router.go('/pages/point/record')">积分记录</view>
			</view>
		</view>
		<view class="tabs">
			<view class="tabs-list ss-flex">
				<view :class="['tabs-list-item',{active:type == 'new'}]" @click="change('new')">新手任务</view>
				<view :class="['tabs-list-item',{active:type == 'day'}]" @click="change('day')">日常任务</view>
				<view :class="['tabs-list-item',{active:type == 'long'}]" @click="change('long')">长期任务</view>
			</view>
			<view class="line" :style="{transform:`translateX(${dynamic})`}"></view>
		</view>
		<view class="task-list w-100 ss-p-x-35">
			<view class="task-item w-100 ss-flex align-center" v-for="(item,index) in state.data[type]" :key="index">
				<view class="left flex-sub ss-m-r-65">
					<view class="title">{{item.title}}</view>
					<view class="tips ss-m-t-14">{{item.details}}<text>{{item.show}}</text></view>
				</view>
				<view class="right">
					<view class="success-btn" v-if="item.button.status === 1" >{{item.button.text}}</view>
					<view class="fail-btn" v-if="item.button.status === 0" @click="jump(item)">{{item.button.text}}</view>
				</view>
			</view>
			<s-empty v-if="!state.data[type]?.length"
				icon="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/vocal/data-empty.png" text="暂无任务" />
		</view>
	</s-layout>
</template>

<script setup>
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	import {
		onLoad,
		onShow,
		onBackPress,
		onPageScroll,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	const template = computed(() => sheep.$store('app').template?.home);
	const userInfo = computed(() => sheep.$store('user').userInfo);

	const dynamic = ref('0')
	const type = ref('new')
	const state = reactive({
		data:{}
	})

	onLoad(()=>{
		getData()
	})
	
	const go = () => {
		sheep.$router.go('/pages/app/score-shop');
	}
	
	const jump = (item) => {
		if (item.button.status === 0) {
			sheep.$router.go(`/${item.url}`);
		}
	}
	
	const getData = async () => {
		const {error,data} = await sheep.$api.point.taskList()
		if (error === 0) {
			state.data = data
		}
	}

	const change = (t) => {
		if (type.value === t) {
			return
		}
		type.value = t
		switch (t) {
			case 'new':
				dynamic.value = '0';
				break;
			case 'day':
				dynamic.value = '250rpx';
				break;
			case 'long':
				dynamic.value = '500rpx';
				break;
			default:
				break;
		}
	}
</script>

<style lang="scss" scoped>
	view {
		box-sizing: border-box;
	}

	.tips-box {
		width: 100%;
		height: 72rpx;
		background: #FBB6AD;
		color: #fff;
	}

	.info {
		width: 100%;
		height: 340rpx;
		background-image: url('https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/bg-orange.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;

		.num {
			font-family: PingFang SC;
			font-size: 80rpx;
			font-weight: 600;
			color: #3D3D3D;
		}

		.query {
			width: 24rpx;
			height: 22rpx;
		}

		.point {
			width: 22rpx;
			height: 22rpx;
		}

		.exchange {
			color: #D79748;
		}

		.record {
			color: #3D3D3D;
			font-size: 26rpx;
		}
	}

	.tabs {
		.tabs-list {
			width: 100%;
			height: 96rpx;

			.tabs-list-item {
				width: 250rpx;
				height: 96rpx;
				line-height: 86rpx;
				text-align: center;
				font-family: PingFang SC;
				font-size: 26rpx;
				color: #767676;
			}
		}

		.line {
			width: 250rpx;
			height: 2rpx;
			background-color: var(--ui-BG-5);
			transition-timing-function: ease;
			transition-duration: .3s;
		}

		.active {
			color: var(--ui-BG-5) !important;
		}
	}
	
	.task-list {
		.task-item {
			height: 136rpx;
			border-bottom: 2rpx solid #F0F0F0;
			
			.title {
				font-family: PingFang SC;
				font-size: 24rpx;
				font-weight: 600;
				color: #3D3D3D;
			}
			
			.tips {
				font-family: PingFang SC;
				font-size: 20rpx;
				font-weight: normal;
				color: #767676;
				
				text {
					color: var(--ui-BG-5);
				}
			}
			
			.right {
				.success-btn {
					width: 110rpx;
					height: 50rpx;
					background: #C8C8C8;
					font-family: PingFang SC;
					font-size: 24rpx;
					font-weight: normal;
					line-height: 50rpx;
					text-align: center;
					color: #FFFFFF;
				}
				
				.fail-btn {
					width: 110rpx;
					height: 50rpx;
					font-family: PingFang SC;
					font-size: 24rpx;
					font-weight: normal;
					line-height: 50rpx;
					text-align: center;
					color: #FFFFFF;
					background: #006CD9;
				}
			}
		}
	}
</style>